<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="my" uri="http://amani.com/function-taglib"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>付款信息</title> 
<%@ include file="../shared/common_header.jsp"%>
</head>
<body>
	<section id='shopping-count'> 
		<input id="ids"  name="ids" type='hidden' value='${ids }'>
		<input id='compno' name="compno" type='hidden' >
		<input id='isExpress' name="isExpress" type='hidden' > 
			<div class='content'>
				<ul class="table-view">
					<li class="table-view-cell" id='shopLi'>
						<div><a id='shop' class="btn-check" ref='shop'>到店领取</a></div>
						 <ul class="table-view sub-view"> 
						 	<c:forEach var="item" items="${Companies }">
								<li class="table-view-cell"><a class="btn-check" value='${item.compno }' ref='company'>${item.compname }</a></li> 
							</c:forEach>
						 </ul>
					</li>
					<li class="table-view-cell sub-view">
					</li>
				</ul>
			</div>
			<div class="bar bar-standard bar-footer-secondary"> 
				 <ul class="table-view">
					<li class="table-view-cell">
						<div id="express"><a class="btn-check" ref='express'>快递</a></div>
						 <ul class="table-view sub-view"> 
							<li class="table-view-cell">
								<div class='table-view-cell-left' >收件人</div>
								<div class='table-view-cell-right'><input name="username" type='text'></div>
								<div></div>
							</li>
							<li class="table-view-cell">
								<div class='table-view-cell-left' >地址</div>
								<div class='table-view-cell-right'><input name="phone"  type='text'></div>
							</li>
							<li class="table-view-cell">
								<div class='table-view-cell-left' >电话</div>
								<div class='table-view-cell-right'><input  name="address" type='text'></div>
							</li>
						 </ul>
					</li>
					<li class="table-view-cell">
					</li>
				</ul>
			</div>
			<div class="bar bar-standard bar-footer"> 
				<div class='acount'>
					<div>合计：<span>￥<span class='count-price'>${totalAmount }</span></span></div>
					<div>不包含运费</div>
				</div>
				<div class='commit'> 
					<button id="commitOrder" class="btn btn-commit">付款</button>
				</div>
			</div> 
	</section>
	
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript">
		$(function(e){
			 wx.config({
			        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			        appId: '${appId}', // 必填，公众号的唯一标识
			        timestamp:"${jsapi_timestamp}", // 必填，生成签名的时间戳
			        nonceStr: '${jsapi_nonceStr}', // 必填，生成签名的随机串
			        signature: '${jsapi_signature}', // 必填，签名，见附录1
			        jsApiList: ['chooseWXPay', 'hideOptionMenu'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			    });
			 var backgroundUrlChose='${ROOT_PATH }content/images/p4_choose.png';
			 var backgroundUrlChosed='${ROOT_PATH }content/images/p4_choosed.png';
			 
			 
			 (function init(){
				 $("#shop").attr("state",1);
				 $("#shop").css('backgroundImage',"url('"+backgroundUrlChosed+"')"); 
				 var $theFirstCheck=$($("#shopLi ul .btn-check")[0]);
				 $theFirstCheck.attr("state",1);
				 $theFirstCheck.css('backgroundImage',"url('"+backgroundUrlChosed+"')");  
				 $("#compno").attr('value', $theFirstCheck.attr("value"));
				 $("#isExpress").attr("value",0);
				 $("#ids").attr("value","${ids}")
			 })();
			 
			 $(".btn-check").bind("click",function(e){
				 $('.btn-check').each(function(){ 
					$(this).attr("state",0);
					$(this).css('backgroundImage',"url('"+backgroundUrlChose+"')"); 
				 }); 
				 var ref= $(this).attr("ref");
				 if(ref && ref=="company"){
					 $("#shop").attr("state",1);
					 $("#shop").css('backgroundImage',"url('"+backgroundUrlChosed+"')"); 
					 $(this).attr("state",1);
					 $(this).css('backgroundImage',"url('"+backgroundUrlChosed+"')"); 
					 $("#compno").attr('value',$(this).attr("value"));
					 $("#isExpress").attr("value",0);
				 }
				 if(ref && ref=="shop"){
					 $(this).attr("state",1);
					 $(this).css('backgroundImage',"url('"+backgroundUrlChosed+"')"); 
					 var $theFirstCheck=$($("#shopLi ul .btn-check")[0]);
					 $theFirstCheck.attr("state",1);
					 $theFirstCheck.css('backgroundImage',"url('"+backgroundUrlChosed+"')");  
					 $("#compno").attr('value', $theFirstCheck.attr("value"));
					 $("#isExpress").attr("value",0);
				 }
				 if(ref && ref=='express'){
					 $(this).attr("state",1);
					 $(this).css('backgroundImage',"url('"+backgroundUrlChosed+"')"); 
					 $("#isExpress").attr("value",1);
				 }
			 });
			 
			
			$("#commitOrder").bind("click", function(e) { 
				var commitData={"isExpress":$("#isExpress").attr('value'),
								"ids":$("#ids").attr('value'),
								"address":$("#address").attr('value'),
								"phone":$("#phone").attr('value'),
								"username":$("#username").attr('value'),
								"orderno":'${orderno}',
								"totalAmount":'${totalAmount}',
								"compno":$("#compno").attr('value')};
				$("#commitOrder").attr("disabled",true);
				//提交订单
				$.ajax({
					 type: "post",
			         url: "${ROOT_PATH}Shop/Orders",
			         data: commitData,
			         dataType: "json",
			         success: function (o) { 
			         	if(o.isSuccessed){
			         		$("#commitOrder").attr("disabled",false);
			         		//调用微信支付接口
			         		var payData=o.payJsonData;;
			         		payData.success=function (res) {
			         			
			         			window.location.href="${ROOT_PATH}Shop/Success";
		         			/*	if(!res){
		         					//发放卡券
		         				}*/
						    }
			         		wx.chooseWXPay(payData);    
			         	} 
			         }
				});
			});
		})
		
	</script>
</body>
</html>